<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <img src="../../客户端/img/star01.jpg" alt="">
        <img src="../../客户端/img/star02.jpg" alt="">
        <img src="../../客户端/img/star03.jpg" alt="">
    </div>
    <img src="../../客户端/img/star04.jpg" alt="">
    <img src="../../客户端/img/star05.jpg" alt="">

    <a href="#" name="text">超链接1</a>
    <a href="./DOM2.html">超链接2</a>
    <a href="./DOM1.html" name="text">超链接3</a>
    <a href="#test">超链接4</a>

    <form action="">
        <input type="text">
    </form>

    <form action="">
        男 <input type="radio" name="" id="">
        女 <input type="radio" name="" id="">
    </form>


    <script>
        //==== DOM0级查找节点的方式 ====
        // 1.document.body  获取body元素
        let body = document.body;
        console.log(document.body);
        console.dir(document.body);
        console.log(body.nodeName);
        console.log(body.nodeValue);
        console.log(body.nodeType);


        //2.document.images    返回页面上所有的图像节点列表,返回的是一个伪数组
        let imgs = document.images;
        // imgs.push(11)
        console.log(imgs[2]);//通过下标访问具体某一张图片
        console.log(imgs);
        imgs[2].style = `
        width:400px;
        height:300px;
        `

        // 3. document.links 返回页面上所有具有href属性的a标签
        let links = document.links;
        console.log(links);

        // 4.document.anchors  返回页面上所有具有name属性的a标签
        console.log(document.anchors);

        //5.document.forms 返回页面上所有的表单元素
        console.log(document.forms);


        //---- 节点通用属性
        //         nodeName   nodeValue   nodeType
        //元素节点 大写的标记名    null          1
        //属性节点    属性名     属性值          2
        //文本节点   #text       内容           3




    </script>

</body>

</html>